<template>
  <div class="item">
    <div class="item-title">
      <span style="font-family: 'Microsoft YaHei',serif" v-if="required">{{ name }}<em
        style="color: red">*</em></span>
      <span style="font-family: 'Microsoft YaHei',serif" v-else>{{ name }}</span>
    </div>
    <div class="content">
      <el-select style="width: 100%" v-model="selectValue" placeholder="请选择" :multiple="multiple">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        selectValue: this.value
      }
    },
    props: ['name', 'required', 'options', 'value', 'multiple']
  }
</script>

<style scoped>
  .item-title {
    position: relative;
    height: 40px;
  }

  .content {
    margin-bottom: 35px;
  }

</style>
